import React, { useEffect, useState } from "react";
import axios from "axios";
import ListItem from "../../components/list-item";
import { NavLink, useNavigate } from "react-router-dom";
import { useSelector, useDispatch } from "react-redux";
import { NavBar } from 'react-vant'
const Index = () => {
  const list = useSelector((state) => state.list);
  const navigate = useNavigate();
  const dispatch = useDispatch();

  const getList = async () => {
    const resp = await axios.get("/api/list");
    console.log(resp.data.data);
    // 存储数据
    dispatch({ type: "setList", payload: resp.data.data });
  };

  useEffect(() => {
    getList();
  }, []);
  return (
    <div>
      <NavBar title="首页" leftArrow="" fixed placeholder></NavBar>
      {list.map((v, i) => {
        return (
          <ListItem
            onClick={() => navigate("/detail/" + v.id)}
            v={v}
            key={i}
          ></ListItem>
        );

        // return (
        //   <NavLink key={i} to="/detail">
        //     <ListItem v={v} key={i}></ListItem>
        //   </NavLink>
        // );
      })}
    </div>
  );
};

export default Index;
